<template>
	<view class="content" v-if="isShow">
		<!-- 名称 -->
		<view class="uni-list shop-name">
			<view class="uni-list-cell" >
				<view class="uni-media-list">
					<view class="uni-media-list-logo">
						<image :src="data.shop_head" v-if="data.shop_head"></image>
						<!-- <text v-if="data.shop_head" class="iconfont" style="font-size: 25px;line-height: 40px;">&#xe608;</text> -->
					</view>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">{{data.shop_name}}</view>
						<view class="uni-media-list-text-bottom uni-ellipsis">配送约40分钟</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 地址 -->
		<view class="uni-list">
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate" style="padding-top: 0;padding-right: 5px;">
					<view class="uni-media-list-head " @click="openLocation">
						<text class="iconfont icon-01">&#xe622;</text>
					</view>
					<view class="uni-media-list-body " @click="openLocation" style="color: #585858">
						{{data.region}} - {{data.address}}
					</view>
					<view class="uni-media-list-footer" @click="dialPhone">
						<text class="iconfont" style="padding: 0 12px;color: #4f76ff;font-size:18px;">&#xe60d;</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 门面照-->
		<view class="history-section icon" v-if="data.slides.length">
			<view class="sec-header">
				<!-- <text class="yticon icon-lishijilu iconfont">&#xe60a;</text> -->
				<text>门面照</text>
			</view>
			<scroll-view scroll-x class="h-list">
				<image :src="item.img" mode="aspectFill" v-for="(item , index) in data.slides" :key="index" @tap="showPic(item,data.slides)"></image>				
			</scroll-view>
		</view>
		
		<!-- 营业执照-->
		<view class="history-section icon" v-if="data.buss_mirror.length">
			<view class="sec-header">
				<!-- <text class="yticon icon-lishijilu iconfont">&#xe65d;</text> -->
				<text>营业执照</text>
			</view>
			<scroll-view scroll-x class="h-list">
				<image :src="item.img" v-for="(item , index) in data.buss_mirror" :key="index" @tap="showPic(item,data.buss_mirror)"></image>				
			</scroll-view>
		</view>
		
		
		<view class="uni-list uni-list-02" >
			<!-- 营业时间 -->
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate">
					<view class="uni-media-list-head">
						<text class="iconfont icon-01">&#xe61e;</text>营业时间：
					</view>
					<view class="uni-media-list-body">{{data.business_hours}}</view>
				</view>
			</view>
			<!-- 配送服务 -->
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate">
					<view class="uni-media-list-head ">
						<text class="iconfont icon-01">&#xe610;</text>配送服务：
					</view>
					<view class="uni-media-list-body">{{data.delivery_service}}</view>
				</view>
			</view>
			<!-- 营业时间 -->
			<view class="uni-list-cell" >
				<view class="uni-list-cell-navigate">
					<view class="uni-media-list-head"  style="align-items:top !important;">
						<text class="iconfont icon-01">&#xe605;</text>商家公告：
					</view>
					<view class="uni-media-list-body" style="min-height: 60px;">{{data.shop_notice}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import config from '@/config/config'
	import {mapState,mapMutations} from 'vuex'
	
	export default {
		components: { },
	    computed: {
	        ...mapState(['hasLogin', 'forcedLogin'])
	    },
		data() {
			return {
				isShow:false,
				data:{
					shop_head:'../../static/img/user-bg.jpg',
					location: "22.841454699278664, 108.41428756713867",
					lat: 22.841454699278664,
					lng: 108.41428756713867,
					slides:[],
					buss_mirror:[]
				},
				effectiveUrl:config.effectiveUrl().replace('index.php/','/')
			}
		},
		onLoad(){
			this.getShopmeans();
		},
	    methods: {
			getShopmeans(){
				this.$request('/app/v1/Shop/getShopmeans',{}).then(res=>{
					let data = res.data;
					data.shop_head = !data.shop_head ? this.data.shop_head : this.effectiveUrl + (data.shop_head || '').replace(/\\/g,"/");
					data.slides = data.slides.map(h=>{
						h.img = this.effectiveUrl + (h.img || '').replace(/\\/g,"/");
						return h;
					});
					data.buss_mirror = data.buss_mirror.map(h=>{
						h.img = this.effectiveUrl + (h.img || '').replace(/\\/g,"/");
						return h;
					});
					this.data = res.data;
					this.isShow = true;
				});
			},
			// 打开地图
			openLocation(){
				uni.openLocation({
					latitude: Number(this.data.lat),
					longitude: Number(this.data.lng),
					success: function(res) {
						console.log(res);
					}
				});
				var map = uni.createMapContext('map');
				map.moveToLocation();
			},
			// 拨打电话
			dialPhone(){
			 	uni.makePhoneCall({
					phoneNumber: this.data.mobile, 
					success: (res) => {
						console.log('调用成功!')	
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			// 预览图片
			showPic(item,list){
				uni.previewImage({
					indicator:"none",
					current:item.img,
					urls: (list || []).map(function(h){ return h.img })
				});
			}
		}
	}
</script>

<style lang="scss">
	.uni-list::before,.uni-list:after{
		height: 0 !important;
	}
	
	// 店铺名称
	.shop-name{
		.uni-media-list{
			padding: 40upx 30upx;
			.uni-media-list-logo{
				border-radius:3px;
				overflow: hidden;
			}
			.uni-media-list-body{
				max-width:calc(100vw - 170upx);
				.uni-media-list-text-top{
					font-size:32upx;
					line-height: 18px;
					font-weight: 600;
					overflow: hidden;
					white-space: nowrap; 
					text-overflow: ellipsis;
					word-spacing:25px;
					letter-spacing:1px
				}
			}
		}
	}
	
	// 地址
	.uni-list{
		.iconfont{
			font-size: 38upx;
			padding: 0 6px;
			line-height:1;
		}
		.icon-01{
			padding-left: 0;
			color: #afafaf;
		}
		.uni-media-list-body{
			position: relative;
			height: auto;
		}
	}
	
	//门面照
	.history-section{
		background: #fff;
		border-radius:10upx;
		padding: 0 30upx;
		padding-top: 10upx;
		.sec-header{
			display:flex;
			align-items: center;
			font-size: $uni-font-size-base;
			color: $font-color-dark;
			line-height: 45upx;
			.yticon{
				font-size: 40upx;
				color: #afafaf;
				margin-right: 12upx;
				line-height: 40upx;
			}
		}
		.h-list{
			white-space: nowrap;
			width: calc(100vw - 60upx);
			image{
				display:inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
	
	.uni-list-02{
		margin-top: 10px;
		.uni-list-cell-navigate{
			padding: 15upx 30upx !important;
			align-items:end !important;
		}
		.uni-media-list-head{
			color: #303133;
		}
		.uni-media-list-body{
			color:#696969;
		}
	}
	
</style>
